<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import taskApi from '@/apis/task.js'

	const receiptPictures = ref([])
	const goodsPictures = ref([])

	const id = ref(0)

	onLoad((params) => {
		id.value = params.id
	})

	async function onSubmit() {
		const formData = {
			id: id.value,
			cargoPickUpPictureList: receiptPictures.value.map((obj) => {
				return { url: obj.url }
			}),
			cargoPictureList: goodsPictures.value.map((obj) => {
				return { url: obj.url }
			}),
		}
		let { msg } = await taskApi.pickUp(formData)
		uni.switchTab({
			url: '/pages/taask/index',
		})
	}
</script>
<template>
	<view class="page-container">
		<view class="receipt-info">
			<uni-file-picker
				limit="3"
				file-extname="jpg,jpeg,webp,gif,png"
				title="请拍照上传回单凭证"
				v-model="receiptPictures"
			></uni-file-picker>
			<uni-file-picker
				limit="3"
				file-extname="jpg,jpeg,webp,gif,png"
				title="请拍照上传货品照片"
				v-model="goodsPictures"
			></uni-file-picker>
		</view>
		<button @click="onSubmit" class="button">提交</button>
	</view>
</template>

<style lang="scss" scoped>
	.page-container {
		padding: 30rpx;
	}

	.receipt-info {
		min-height: 600rpx;
		background-color: #fff;
		padding: 20rpx 30rpx;
		border-radius: 16rpx;

		::v-deep .uni-file-picker {
			margin-bottom: 30rpx;
		}
	}

	.button {
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		/* #ifdef APP */
		padding-top: 4rpx;
		/* #endif */
		border-radius: 100rpx;
		margin-top: 60rpx;
		color: #fff;
		font-size: $uni-font-size-big;
		background-color: $uni-primary;

		&[disabled],
		&.disabled {
			color: #fff;
			background-color: #fadcd9;
		}
	}
</style>
